<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .table{
             width: 100%;
             border-collapse: collapse;
         }

        .border, .border th,.border td{
              border: 1px solid;
         }

         .striped tbody tr:nth-child(even){
              background-color: green;
         }
    </style>
</head>
<body>


<table class="table" id="table1">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>001</td>
        <td>Martin</td>
        <td>56</td>
    </tr>
    <tr>
        <td>001</td>
        <td>Martin</td>
        <td>56</td>
    </tr>
    <tr>
        <td>001</td>
        <td>Martin</td>
        <td>56</td>
    </tr>
    <tr>
        <td>001</td>
        <td>Martin</td>
        <td>56</td>
    </tr>
    </tbody>
</table>
<div>
     <button id="btnBorder">border</button>
    <button id="btnStripe">stripe</button>
    <button id="btnToggle">切换</button>

</div>

</body>
<script>




  var  btnBorder = document.getElementById('btnBorder');
  var  btnStripe = document.getElementById('btnStripe');
  var  btnToggle = document.getElementById('btnToggle');


  btnBorder.onclick=function (){
      var  table1= document.getElementById('table1');
      table1.classList.add('border');
  }


  btnStripe.onclick=function (){
      var  table1= document.getElementById('table1');
      table1.classList.add('striped');
  }

  btnToggle.onclick=function (){
      var  table1= document.getElementById('table1');

    var clist=  table1.classList;

    if(clist.contains('border')){
         clist.remove('border');
         clist.add('striped');
    }else{
        clist.remove('striped');
        clist.add('border');
    }


  }

</script>

</html>